$def with (data_list,no2_line_name_dict,o3_line_name_dict,pm10_line_name_dict,pm25_line_name_dict,co_line_name_dict,so2_line_name_dict,no2_chart_data_array,o3_chart_data_array,pm10_chart_data_array,pm25_chart_data_array,co_chart_data_array,so2_chart_data_array,value_dict)
<script language="JavaScript"> 
function myrefresh() 
{ 
       window.location.reload(); 
} 
setTimeout('myrefresh()',180000); //指定180秒刷新一次
</script>
<h3 class="page-title">首页</h3>
<div class="row-fluid">
	<div class="block responsive span6">
		<div class="block-body">
		   <div id="no2_chart" style="height:200px"></div>
		</div>
    </div>
    <div class="block responsive span6">
		<div class="block-body">
		   <div id="o3_chart" style="height:200px"></div>
		</div>
    </div>
</div>
<div class="row-fluid">
	<div class="block responsive span6">
		<div class="block-body">
		   <div id="pm10_chart" style="height:200px"></div>
		</div>
    </div>
    <div class="block responsive span6">
		<div class="block-body">
		   <div id="pm25_chart" style="height:200px"></div>
		</div>
    </div>
</div>
<div class="row-fluid">
	<div class="block responsive span6">
		<div class="block-body">
		   <div id="co_chart" style="height:200px"></div>
		</div>
    </div>
    <div class="block responsive span6">
		<div class="block-body">
		   <div id="so2_chart" style="height:200px"></div>
		</div>
    </div>
</div>

<div class="row-fluid">
    <div class="block span12">
        <div class="block-heading" data-toggle="collapse" data-target="#tablewidget">超标数据时段
            <a class="label label-info" href="/alarms"><i class="icon-pencil"></i>设置参数</a>
         </div>
        <div id="tablewidget" class="block-body collapse in">
            <table class="table table-striped table-bordered rounded-corner">
                <thead>
                    <tr>
                        <th>监测站</th>
                        <th>日期</th>
                        <th>时段</th>
                        <th>NO₂(μg/m³)</th>
                        <th>O₃(μg/m³)</th>
                        <th>PM10(μg/m³)</th>
                        <th>PM2.5(μg/m³)</th>
                        <th>CO(mg/m³)</th>
                        <th>SO₂(μg/m³)</th>
                        <th>湿度(%rh)</th>
                        <th>风向(a)</th>
                        <th>风速(m/s)</th>
                        <th>大气压(MPa)</th>
                        <th>温度(°C)</th>
                    </tr>
                </thead>
                <tbody>
                    <tr >
                        <td></td>
                        <td>预警值</td>
                        <td></td>
                        <td>$value_dict['avg_no2']</td>
                        <td>$value_dict['avg_o3']</td>
                        <td>$value_dict['avg_pm10']</td>
                        <td>$value_dict['avg_pm25']</td>
                        <td>$value_dict['avg_co']</td>
                        <td>$value_dict['avg_so2']</td>
                        <td>$value_dict['avg_humidity']</td>
                        <td>$value_dict['avg_wind_direction']</td>
                        <td>$value_dict['avg_wind_speed']</td>
                        <td>$value_dict['avg_atmosphere']</td>
                        <td>$value_dict['avg_temperature']</td>
                    </tr>
                    $ i=0
                    $ line_style='even'
                    $for data in data_list:
                        $if i&1 :
                            $ line_style='odd'
                        $else:
                            $ line_style='even'
                        $ i=i+1
                        <tr class="$line_style">
                            <td>$data.site</td>
                            <td>$data.collection_date</td>
                            <td>$data.collection_hour</td>
                            <td class="
                            $if value_dict['avg_no2']!='' and data.avg_no2 > float(value_dict['avg_no2']):
                                text-error
                            ">$data.avg_no2</td>
                            <td class="
                            $if value_dict['avg_o3']!='' and data.avg_o3 > float(value_dict['avg_o3']):
                                text-error
                            ">$data.avg_o3</td>
                            <td class="
                            $if value_dict['avg_pm10'] !='' and data.avg_pm10 > float(value_dict['avg_pm10']):
                                text-error
                            ">$data.avg_pm10</td>
                            <td class="
                            $if value_dict['avg_pm25']!='' and  data.avg_pm25 > float(value_dict['avg_pm25']):
                                text-error
                            ">$data.avg_pm25</td>
                            <td class="
                            $if value_dict['avg_co']!='' and  data.avg_co > float(value_dict['avg_co']):
                                text-error
                            ">$data.avg_co</td>
                            <td class="
                            $if value_dict['avg_so2']!='' and  data.avg_so2 > float(value_dict['avg_so2']):
                                text-error
                            ">$data.avg_so2</td>
                            <td>$data.avg_humidity</td>
                            <td>$data.avg_wind_direction</td>
                            <td>$data.avg_wind_speed</td>
                            <td>$data.avg_atmosphere</td>
                            <td>$data.avg_temperature</td>
                        </tr>
                </tbody>
            </table>
        </div>
    </div>

</div>
<script type="text/javascript">
$ type_array=['no2','o3','pm10','pm25','co','so2']
$ line_name_dict=so2_line_name_dict
$ chart_data_array=so2_chart_data_array
$ title='SO₂(μg/m³)'
$for type_name in type_array:
    console.log('$:type_name');
    $if type_name =='no2' :
        $ line_name_dict=no2_line_name_dict
        $ chart_data_array=no2_chart_data_array
        $ title='NO₂(μg/m³)'
    $if type_name =='o3' :
        $ line_name_dict=o3_line_name_dict
        $ chart_data_array=o3_chart_data_array
        $ title='O₃(μg/m³)'
    $if type_name =='pm10' :
        $ line_name_dict=pm10_line_name_dict
        $ chart_data_array=pm10_chart_data_array
        $ title='PM10(μg/m³)'
    $if type_name =='pm25' :
        $ line_name_dict=pm25_line_name_dict
        $ chart_data_array=pm10_chart_data_array
        $ title='PM2.5(μg/m³)'
    $if type_name =='co' :
        $ line_name_dict=co_line_name_dict
        $ chart_data_array=co_chart_data_array
        $ title='CO(mg/m³)'

    // 基于准备好的dom，初始化echarts图表
    var no2Chart = echarts.init(document.getElementById('$type_name'+'_chart'));
    var no2_option = {
        title: {
            text: "最近15天$title",
            textStyle:{
                fontSize:14
            }
        },
        grid: {
                top: '15%',
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
        },
        calculable: true,
        xAxis: [{
            type: 'category'
        }],
        yAxis: [{
            type: 'value'
        }],
        series: [
        $for k, v in line_name_dict.items():
            $if k=='line00':
                $ continue
            {type: 'line',smooth:0.2,seriesLayoutBy: 'row'},
        ]
    };

    //页面加载   获取全部信息
    var no2_data = {
        "source": $:chart_data_array//不转义
    };
    no2_option.dataset = no2_data;
    no2Chart.setOption(no2_option);
    no2Chart.hideLoading();
    console.log("no2Chart init");
</script>


